<script setup lang="ts">
import type { DataField } from '../DataField'

const { field } = defineProps<{
  field: DataField
  parentProp?: string
}>()
</script>

<template>
  <el-table-column
    :prop="field.name" :label="field.title" :min-width="field.width"
    :align="field.align ?? (field.options ? 'center' : undefined)" header-align="center"
    :fixed="(field.columnType === 'KEY' || field.columnType === 'MAIN') ? 'left' : false"
    :sortable="field.sort !== undefined && field.sort ? 'custom' : false"
    class-name="data-table-column"
  >
    <template #default="{ row, $index }">
      <data-field-item
        v-if="row._edit !== undefined && ((typeof field.edit === 'function') ? field.edit(row, $index as number) : (field.edit ?? false))"
        v-model="row[field.name]"
        show-title="false" :data="row"
        :parent-prop="parentProp === undefined ? `${$index}` : `${parentProp}.${$index}`"
        :field="field"
      >
        <slot :name="`edit_${field.name}`" :field="field" :row="row" />
      </data-field-item>
      <slot v-else :name="field.name" :field="field" :row="row">
        <data-field-value :field="field" :row="row" />
      </slot>
    </template>
  </el-table-column>
</template>

<style lang="css">
.data-table-column .data-form-item {
  --at-apply: m-0;
}
.data-table-column .data-form-item .el-form-item .el-form-item__label {
  --at-apply: p-0;
}
</style>
